<template>
  <v-container class="green lighten-2" style="position:fixed;top:0px;bottom:0px;left:0px;rigth:0px;overflow:scroll;">
    <!-- 第一行，招呼语 -->
    <v-row>
      <!-- 太阳 -->
      <div>
        <div class="sunny"></div>
      </div>
      <v-col>
        <!-- <div style="position:relative;left:90px;">
          <v-icon style="position:relative;bottom:5px;" color="white" size="24">mdi-map-marker</v-icon>
          <span style="position:relative;bottom:5px;color:white;">岳麓区</span>
          <span style="position:relative;left:20px;bottom:5px;">
            <v-icon size="24" color="white">mood</v-icon>
            <span style="position:relative;left:5px;bottom:-1px;color:white;">优</span>
          </span>
        </div>
        <div style="position:relative;left:100px;">
          <span style="font-size:19px;position:relative;top:5px;color:white;"><b>23&#8451;</b></span>
          <span style="position:relative;left:5px;top:2px;color:white;">19&#176;/32&#176;</span>
        </div> -->

        <!-- <p class="white--text title font-BLACK ml-2">早上好,张小明~</p> -->
        
        <!-- <div style="position:relative;left:100px;">
          <span style="font-size:19px;position:relative;bottom:3px;color:white;"><b>23&#8451;</b></span>
          <span style="position:relative;left:5px;bottom:5px;color:white;">19&#176;/32&#176;</span>
        </div>
        <div style="position:relative;left:90px;">
          <span style="position:relative;left:20px;top:2px;">
            <v-icon size="24" color="white">mood</v-icon>
            <span style="position:relative;left:5px;top:1px;color:white;">优</span>
          </span>
        </div> -->
        <div style="position:relative;left:100px;">
          <v-icon style="position:relative;bottom:5px;" color="white" size="24">mdi-map-marker</v-icon>
          <span style="position:relative;bottom:5px;color:white;">岳麓区</span>
          
        </div>
        <div style="position:relative;left:100px;">
          <span style="font-size:19px;position:relative;top:5px;color:white;"><b>23&#8451;</b></span>
          <span style="position:relative;left:15px;top:3px;">
            <v-icon size="24" color="yellow">stop</v-icon>
            <span style="position:relative;left:5px;top:1px;color:white;">良</span>
            <span style="position:relative;left:10px;top:1px;color:white;">55</span>
          </span>
        </div>
      </v-col>
      <!--音乐、分享按钮-->
      <v-col cols="2" class="mr-n8 pt-1">
        <v-btn icon color="white" @click="re(select)" :class="rotate">
          <v-icon size="24">mdi-music</v-icon>
        </v-btn>
        <v-row class="ml-0">
          <p class="overline white--text ml-2 mt-n1">音乐</p>
        </v-row>
      </v-col>
      <v-col cols="2" class="pl-5 pt-1">
        <v-btn @click="share()" icon color="white">
          <v-icon size="24">mdi-share</v-icon>
        </v-btn>
        <v-row class="ml-0">
          <p class="overline white--text ml-2 mt-n1">分享</p>
        </v-row>
      </v-col>
    </v-row>

    <!-- 第二行，头像和等级 -->
    <!-- <v-row class="red py-n6">
      <v-col class="d-flex justify-end">
        <router-link :to="{name:'levelinfo'}" style="text-decoration:none">
          <v-btn height="55" width="150" x-large rounded color="primary" dark class="mr-n12"> -->
            <!-- 头像 -->
            <!-- <v-avatar class="ml-n10">
              <img src="https://cdn.vuetifyjs.com/images/lists/2.jpg" />
            </v-avatar> -->
            <!-- 等级 -->
            <!-- <div class="pl-2">Lv.3</div>
          </v-btn>
        </router-link>
      </v-col>
    </v-row> -->

    
    
    

    <!-- 第三行，更多应用 -->
    <!-- <div class="white--text title font-weight-black">更多应用</div> -->
    <v-row>
      <v-col cols="3">
        <v-row class="d-flex justify-center">
          <v-btn icon color="white" :to="{name:'bikegame'}">
            <v-icon size="32">videogame_asset</v-icon>
          </v-btn>
        </v-row>
        <v-row class="d-flex justify-center">
          <p class="white--text">小游戏</p>
        </v-row>
      </v-col>
      <v-col cols="3">
        <v-row class="d-flex justify-center">
          <v-btn icon color="white" :to="{name:'Mall'}">
            <v-icon size="32">store</v-icon>
            <!-- <v-icon size="32">local_mall</v-icon> -->
          </v-btn>
        </v-row>
        <v-row class="d-flex justify-center">
          <p class="white--text">绿色商城</p>
        </v-row>
      </v-col>
      <v-col cols="3">
        <v-row class="d-flex justify-center">
          <v-btn icon color="white" :to="{name:'Intelligent'}">
            <v-icon size="32">adb</v-icon>
            <!-- <v-icon size="32">android</v-icon> -->
          </v-btn>
        </v-row>
        <v-row class="d-flex justify-center">
          <p class="white--text">智能助手</p>
        </v-row>
      </v-col>
      <v-col cols="3">
        <v-row class="d-flex justify-center">
          <v-btn icon color="white" :to="{name:'PublicBenefit'}">
            <v-icon size="32">mdi-heart</v-icon>
            <!-- <v-icon size="32">supervisor_account</v-icon> -->
          </v-btn>
        </v-row>
        <v-row class="d-flex justify-center">
          <p class="white--text">爱心公益</p>
        </v-row>
      </v-col>
    </v-row>

    <!-- 第四行，基本数据卡片 -->
    <div class="white--text title font-weight-black">数据概况</div>
    <v-row>
      <v-col>
        <v-card>
          <!-- 第一行，标题 -->
          <v-row>
            <v-col cols="6" class="d-flex justify-center">
              <router-link :to="{name:'greenpoints'}" style="text-decoration:none">
                <v-btn text class="mb-n8">
                  <v-badge color="orange" content="领取积分" class="ml-6" overlap>
                    <div class="title">绿色积分</div>
                  </v-badge>
                </v-btn>
              </router-link>
            </v-col>
            <v-col cols="6" class="d-flex justify-center">
              <router-link :to="{name:'carbonreduce'}" style="text-decoration:none">
                <v-btn text class="mb-n8">
                  <v-badge color="orange" content="查看成就" class="ml-n6" overlap>
                    <div class="title">碳减排量</div>
                  </v-badge>
                </v-btn>
              </router-link>
            </v-col>
          </v-row>
          <!-- 第二行，数据值 -->
          <v-row>
            <v-col cols="6" class="d-flex justify-center pl-8">
              <v-badge overlap color="success" content="+10" class="mt-5">
                <div class="mt-2">280</div>
              </v-badge>
            </v-col>
            <v-col cols="6" class="d-flex justify-center pl-0">
              <v-badge overlap color="success" content="+100" class="mt-5">
                <div class="mt-2">0 Kg</div>
              </v-badge>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>

    
    <!-- 第五行，排行版卡片 -->
    <div class="white--text title font-weight-black">排行榜</div>
    <v-row>
      <v-col>
        <v-card>
          <!-- 第一行，选择按钮 -->
          <v-row>
            <v-col cols="6" class="d-flex justify-center">
              <div :class="sbstyle1" @click="shift()">周排行榜</div>
            </v-col>
            <v-divider vertical></v-divider>
            <v-col cols="5" class="d-flex justify-center pl-12" @click="shift()">
              <div :class="sbstyle2">总排行榜</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <!-- 第二行，数据 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="7">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title class="yellow--text title font-weight-bold">1.st</v-list-item-title>
                </v-list-item-content>
                <v-list-item-avatar>
                  <img src="https://cdn.vuetifyjs.com/images/lists/2.jpg" alt="John" />
                </v-list-item-avatar>
                <v-list-item-content class="pl-3">
                  <v-list-item-title class="primary--text font-weight-bold">我</v-list-item-title>
                  <v-list-item-subtitle>Lv.3</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>1280</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <!-- 数据模板 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="7">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title class="blue-grey--text title font-weight-bold">2.nd</v-list-item-title>
                </v-list-item-content>
                <v-list-item-avatar>
                  <img src="https://cdn.vuetifyjs.com/images/lists/ali.png" alt="John" />
                </v-list-item-avatar>
                <v-list-item-content class="pl-3">
                  <v-list-item-title>Ali</v-list-item-title>
                  <v-list-item-subtitle>Lv.3</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>1200</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <!-- 数据模板 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="7">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title class="brown--text title font-weight-bold">3.rd</v-list-item-title>
                </v-list-item-content>
                <v-list-item-avatar>
                  <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="Alex" />
                </v-list-item-avatar>
                <v-list-item-content class="pl-3">
                  <v-list-item-title>Alex</v-list-item-title>
                  <v-list-item-subtitle>Lv.4</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>1150</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <!-- 数据模板 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="7">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>4.th</v-list-item-title>
                </v-list-item-content>
                <v-list-item-avatar>
                  <img src="https://cdn.vuetifyjs.com/images/lists/1.jpg" alt="John" />
                </v-list-item-avatar>
                <v-list-item-content class="pl-3">
                  <v-list-item-title>Bruce</v-list-item-title>
                  <v-list-item-subtitle>Lv.2</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>1080</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <!-- 数据模板 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="7">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>5.th</v-list-item-title>
                </v-list-item-content>
                <v-list-item-avatar>
                  <img src="https://cdn.vuetifyjs.com/images/lists/3.jpg" alt="John" />
                </v-list-item-avatar>
                <v-list-item-content class="pl-3">
                  <v-list-item-title>Adams</v-list-item-title>
                  <v-list-item-subtitle>Lv.3</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>1020</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <!-- 数据模板 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="7">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>6.th</v-list-item-title>
                </v-list-item-content>
                <v-list-item-avatar>
                  <img src="https://cdn.vuetifyjs.com/images/lists/4.jpg" alt="John" />
                </v-list-item-avatar>
                <v-list-item-content class="pl-3">
                  <v-list-item-title>Hansen</v-list-item-title>
                  <v-list-item-subtitle>Lv.2</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>980</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <!-- 数据模板 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="7">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>7.th</v-list-item-title>
                </v-list-item-content>
                <v-list-item-avatar>
                  <img src="https://cdn.vuetifyjs.com/images/lists/5.jpg" alt="John" />
                </v-list-item-avatar>
                <v-list-item-content class="pl-3">
                  <v-list-item-title>Britta</v-list-item-title>
                  <v-list-item-subtitle>Lv.2</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>800</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <!-- 数据模板 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="7">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>8.th</v-list-item-title>
                </v-list-item-content>
                <v-list-item-avatar>
                  <img src="https://cdn.vuetifyjs.com/images/john.png" alt="John" />
                </v-list-item-avatar>
                <v-list-item-content class="pl-3">
                  <v-list-item-title>Lee</v-list-item-title>
                  <v-list-item-subtitle>Lv.2</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>700</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <!-- 数据模板 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="7">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>9.th</v-list-item-title>
                </v-list-item-content>
                <v-list-item-avatar>
                  <span class="blue--text headline">CJ</span>
                </v-list-item-avatar>
                <v-list-item-content class="pl-3">
                  <v-list-item-title>CJ</v-list-item-title>
                  <v-list-item-subtitle>Lv.1</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>500</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <!-- 数据模板 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="7">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>10.th</v-list-item-title>
                </v-list-item-content>
                <v-list-item-avatar>
                  <span class="blue--text headline">MB</span>
                </v-list-item-avatar>
                <v-list-item-content class="pl-3">
                  <v-list-item-title>MB</v-list-item-title>
                  <v-list-item-subtitle>Lv.1</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>280</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
        </v-card>
      </v-col>
    </v-row>
    <!-- 预置小游戏入口 -->
    <!-- <router-link :to="{name:'bikegame'}" style="text-decoration:none">
      <v-btn color="primary" class="mb-n8">小游戏</v-btn>
    </router-link> -->
    <!-- 预置绿色商城入口 -->
    <!-- <router-link :to="{name:'Mall'}" style="text-decoration:none">
      <v-btn color="primary" class="mb-n8">绿色商城</v-btn>
    </router-link> -->

    <!-- 浮动个人中心按钮 -->
    <v-fab-transition>
      <router-link :to="{name:'levelinfo'}" style="text-decoration:none">
          <v-btn style="top:172px;" fab fixed top right height="55" width="150" x-large rounded color="primary" dark class="mr-n12">
            <!-- 头像 -->
            <v-avatar class="ml-n10">
              <img src="https://cdn.vuetifyjs.com/images/lists/2.jpg" />
            </v-avatar>
            <!-- 等级 -->
            <div class="pl-2">Lv.3</div>
          </v-btn>
        </router-link>
    </v-fab-transition>

    <shareConfirm ref="myshare"></shareConfirm>
<!-- 
    <v-btn :to="{name:'luckywheel'}">1234</v-btn> -->
  </v-container>
</template>

<script>
import shareConfirm from "./Share";
export default {
  components: {
    shareConfirm
  },
  data: () => ({
    user: [],
    sbstyle1: "success--text font-weight-black",
    sbstyle2: "font-weight-medium",
    temp: "",
    rotate: "",
    select: 1,
  }),
  methods: {
    // init() {
    //   var param = new URLSearchParams();
    //   param.append("user_id", Number(1));
    //   this.$axios({
    //     methods: "post",
    //     url: "api/phpws/getUser.php",
    //     data: param
    //   })
    //     .then(response => {
    //       this.user = response.data.result.user;
    //       console.log(this.user);
    //     })
    //     .catch(function(error) {
    //       console.log(error);
    //     });
    // },
    //分享功能
    share() {
      this.$refs.myshare.show("我的分享", "test"); //分享内容
    },
    shift() {
      this.temp = this.sbstyle1;
      this.sbstyle1 = this.sbstyle2;
      this.sbstyle2 = this.temp;
    },
    re(select) {
      if(select==1){
        this.rotate = "rotate";
        this.select=0;
      }
      else{
        this.rotate = "";
        this.select=1;
      }
    }
  }
  // created() {
  //   this.init();
  // }
};
</script>

<style scoped>
/* 太阳的CSS代码 */
@keyframes sunny {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.rotate{
  animation: sunny 5s linear infinite;
}

.sunny{
  width: 10px;
  height: 70px;
  position: absolute;
  top: 10px;
  left: 45px;
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
  animation: sunny 15s linear infinite;
}

.sunny::before{
  content: '';
  width: 10px;
  height: 70px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(90deg)
}

.sunny::after{
  content: '';
  width: 40px;
  height: 40px;
  position: absolute;
  top: 15px;
  left: -15px;
  background: #ffee44;
  border-radius: 50%;
  box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
}
</style>